revision:
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<style>
.clock {display: block; position: absolute; top: 80%; left: 5%; color: blue; font-size: 2vw; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0.3vw; border: 0.3vw solid burlywood; background-color: silver;}
</style>
<script>
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h == 0){ h = 12;}
if(h > 12){ h = h - 12; session = "PM";}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
<div id="clockdate">
<div class="clockdate-wrapper">
<div id="clockA"></div>
</div>
</div>
<style>
.clockdate-wrapper{display: block; background-color: rgb(172, 39, 39); padding:1vw; max-width:25vw; height: 5vw; width: 100%; text-align: center; border-radius:10%; margin:0 auto; }
#clockA{background-color: darkgrey;border-radius: 10%; font-size: 3vw; color: black; text-shadow:0px 0px 1px #fff; font-weight:600;}
</style>
<script>
function startTime() {
var today = new Date();
var hr = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
//Add a zero in front of numbers<10
min = checkTime(min);
sec = checkTime(sec);
document.getElementById("clockA").innerHTML = hr + " : " + min + " : " + sec;
var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i;}
return i;
}
// for calling, see <body> element
</script>
<div id="clockdate2">
<div class="clockdate-wrapper2">
<div id="clock2"></div>
<div id="date2"></div>
</div>
</div>
<style>
.clockdate-wrapper2{display: block; background-color: rgb(172, 39, 39); padding:1vw;
max-width:30vw; height: 5vw; width: 100%; text-align: center; border-radius:10%;
margin:0 auto; }
#clock2{background-color: darkgrey;border-radius: 10%; font-size: 3vw; color: black;
text-shadow:0px 0px 1px #fff;font-weight:600; }
#clock2 span{color:#888; text-shadow:0px 0px 1px #333; font-size:1vw; position:relative;
top:-2vw; left:-1vw;}
#date2{letter-spacing:0.5vw; font-size:1vw; font-family:arial,sans-serif; color:#fff;
padding-top: 0.5vw;}
</style>
<script>
function startTime2() {
var now = new Date();
var hr2 = now.getHours();
var min2 = now.getMinutes();
var sec2 = now.getSeconds();
ap = (hr2 < 12) ? "<span>AM</span>" : "<span>PM</span>";
hr2 = (hr2 == 0) ? 12 : hr2;
hr2 = (hr2 > 12) ? hr2 - 12 : hr2;
//Add a zero in front of numbers<10
hr2 = checkTime2(hr2);
min2 = checkTime2(min2);
sec2 = checkTime2(sec2);
document.getElementById("clock2").innerHTML = hr2 + ":" + min2 + ":" + sec2 + " " + ap;
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var curWeekDay = days[now.getDay()];
var curDay = now.getDate();
var curMonth = months[now.getMonth()];
var curYear = now.getFullYear();
var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear;
document.getElementById("date2").innerHTML = date;
var time2 = setTimeout(function(){ startTime2() }, 500);
}
function checkTime2(i) {
if (i < 10) {i = "0" + i;}
return i;
}
// for calling, see <body> element
</script>
<div>
<div id="ClockDisplay" class="clock_A" onload="getTime()"></div>
</div>
<style>
.clock_A {display: block; position: relative; text-align: center; color: brown;
border: 0.5vw inset burlywood; margin: 0 auto; font-size: 3vw;
font-family: sans-serif, Helvetica; letter-spacing: 0.6vw;}
</style>
<script>
function getTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var session = "AM";
if(h == 0){ h = 12;}
if(h > 12){ h = h - 12; session = "PM";}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("ClockDisplay").innerText = time;
document.getElementById("ClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
getTime();
</script>
<div id="clock"></div>
<style>
#clock {height: 10vh; width: 60%;background-color: #14080e;color: #e9eb9e;
display: flex; align-items: center; justify-content: center;font-size: 3vw;
border: 1vw outset burlywood;}
</style>
<script>
let clock = () => {
let date = new Date();
let hrs = date.getHours();
let mins = date.getMinutes();
let secs = date.getSeconds();
let period = "AM";
if (hrs == 0) {
hrs = 12;
} else if (hrs >= 12) {
hrs = hrs - 12;
period = "PM";
}
hrs = hrs < 10 ? "0" + hrs : hrs;
mins = mins < 10 ? "0" + mins : mins;
secs = secs < 10 ? "0" + secs : secs;
let time = `${hrs}:${mins}:${secs} - ${period}`;
document.getElementById("clock").innerText = time;
setTimeout(clock, 1000);
};
clock();
</script>